import React, { useState } from 'react'
import './wjs.scss'
import * as axios from '../axiosAPI/zxr'
import { useNavigate } from 'react-router-dom'
import { message } from 'antd';

export default function ExamLogin() {
  let navigate = useNavigate()
  let [name, setName] = useState('')
  let [card, setCard] = useState('')
  let [tid, setTid] = useState('')
  
  const [messageApi, contextHolder] = message.useMessage();
  let login = async() => {
    let result = await axios.default.examlogin(name, card, tid)
    if(result.state){
      sessionStorage.setItem('sid', result.sid)
      messageApi.open({
        type: 'success',
        content: '登录成功, 即将跳转至主页',
      });
      //-------路由跳转  待完善------------
      // navigate('/')
      //----------------------------------
    }else{
      messageApi.open({
        type: 'error',
        content: '登录失败,请检查姓名、身份证号或学号',
      });
    }
  }
  return (
    <div className='examlogin'>
      <div className="top">
        <img className='main' src="https://cdn7.axureshop.com/demo/2001850/images/%E5%9C%A8%E7%BA%BF%E8%80%83%E8%AF%95/u2853.svg" alt="" />
        <img className='x' src="https://cdn7.axureshop.com/demo/2001850/images/%E5%9C%A8%E7%BA%BF%E8%80%83%E8%AF%95/u2854.svg" alt="" />
      </div>
      <div className="title">
        培训学院在线考试系统
        <span className='lessfont'>考生版</span>
      </div>
      <div className="form">
        <p>
          <span className='font'>考生姓名:</span>
          <input type="text" value={name} onChange={(e) => {setName(e.target.value)}} />
        </p>
        <p>
          <span className='font'>身份证号:</span>
          <input type="text" value={card} onChange={(e) => {setCard(e.target.value)}} />
        </p>
        <p>
          <span className='font'>学号:</span>
          <input type="text" value={tid} onChange={(e) => {setTid(e.target.value)}} />
        </p>
        <p>
          <button className='btn' onClick={() => {login()}}>登录</button>
        </p>
        {contextHolder}
      </div>
    </div>
  )
}
